<template>
    <el-container class="home-container">

        <el-container>
            <el-aside :width="isCollapse ? '64px' : '200px'"
                :style="{backgroundColor:defaultTheme}">
                <transition name="fade-transform">
                    <!-- 跳转 -->
                    <el-menu :default-active="$route.path" class="el-menu-demo"
                        :background-color="defaultTheme" unique-opened
                        text-color="#fff" active-text-color="rgb(238,255,0)"
                        router :collapse="isCollapse">
                        <!-- 路径配置 -->
                        <el-menu-item index="/index/chart">
                            <i class="el-icon-location"></i>
                            <span>首页</span>
                        </el-menu-item>
                        <el-menu-item index="/index/adminList">
                            <i class="el-icon-user"></i>
                            <span>管理员列表</span>
                        </el-menu-item>

                        <el-submenu index='1'>
                            <template slot="title">
                                <i class="el-icon-picture-outline"></i>
                                <span>轮播图管理</span>
                            </template>
                            <el-menu-item index="/index/swiperList">
                                <i class="el-icon-collection"></i>
                                <span>轮播图列表</span>
                            </el-menu-item>
                            <el-menu-item index="/index/swiperAdd">
                                <i class="el-icon-setting"></i>
                                <span>新增轮播图</span>
                            </el-menu-item>
                        </el-submenu>

                        <el-menu-item index="/index/menuList">
                            <i class="el-icon-notebook-2"></i>
                            <span>菜谱列表</span>
                        </el-menu-item>
                        <el-menu-item index="/index/vipList"><i
                                class="el-icon-notebook-1"></i>
                            <span>会员管理</span>
                        </el-menu-item>
                        <el-menu-item index="/index/productList">
                            <i class="el-icon-shopping-cart-2"></i>
                            <span>套餐管理</span>
                        </el-menu-item>

                    </el-menu>
                </transition>
            </el-aside>

            <!-- 展示 -->
            <el-main>
                <el-header>
                    <hamburger :is-active="isCollapse"
                        class="hamburger-container"
                        @toggleClick="toggleCollapse" />
                    <breadcrumb />
                    <div class="themeBox">

                        <ThemePicker />
                    </div>

                </el-header>
                <div class="routerViewBox">
                    <transition name="fade-transform" mode="out-in">
                        <router-view />
                    </transition>
                </div>

            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import breadcrumb from '../../components/adminList/Breadcrumb'
import hamburger from '../../components/adminList/Hamburger'
import ThemePicker from '../../components/adminList/ThemePicker'

export default {
    components: {
        breadcrumb,
        hamburger,
        ThemePicker,
        theme: '',
    },
    methods: {
        logout() {
            localStorage.clear();
            this.$router.push('/login');
        },
        toggleCollapse() {
            this.isCollapse = !this.isCollapse
        },
    },
    created() {
        console.log(this.$store.state);
    },
    data() {
        return {
            // 是否折叠
            isCollapse: false,
        }
    },
    computed: {
        defaultTheme() {
            return this.$store.state.setting.theme
        }
    }
};
</script>


<style lang="scss" scoped>
@import "@/element-variables.scss";
/* fade */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
    opacity: 0;
}
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
    transition: all 0.5s;
}

.fade-transform-enter {
    opacity: 0;
    transform: translateX(-30px);
}

.fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
}

.home-container {
    height: 100vh;
    // overflow: hidden;
    .el-header {
        background-color: white;
        display: flex;
        // justify-content: space-between;
        padding-left: 0;
        align-items: center;
        color: #000;
        font-size: 28px;
        // margin-bottom: 0px;
        position: relative;
        .themeBox {
            position: absolute;
            right: 50px;
            font-size: 15px;
            display: flex;
            align-items: center;
        }
        > div {
            display: flex;
            align-items: center;
            height: 100%;
            span {
                margin-left: 15px;
            }
        }
    }

    .el-aside {
        // background-color: $--color-primary;
        // #df8141;
        .el-menu {
            border-right: none;
        }
        .toggle-button {
            // background-color: #df8141;
            font-size: 10px;
            line-height: 24px;
            color: #fff;
            text-align: center;
            letter-spacing: 0.2em;
            cursor: pointer;
            border-bottom: 1px solid white;
        }
    }

    .el-main {
        background-color: #eaedf1;
        padding: 0;
    }
    .el-menu-item.is-active {
        background-color: rgba(0, 0, 0, 0.2) !important;
    }
    i {
        color: white;
    }
}
.routerViewBox {
    padding: 20px;
}
.hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
        background: rgba(0, 0, 0, 0.025);
    }
}
</style>
